

            <div class="container-fluid">
                <table id="table"></table>
            </div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="form-title"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="alias-name"  class="control-label">服务器别名：</label>
                        <input type="text" class="form-control" id="alias-name">
                    </div>
                    <div class="form-group">
                        <label for="server-address"  class="control-label">服务器地址：</label>
                        <input type="text" class="form-control" id="server-address">
                    </div>
                    <div class="form-group">
                        <label for="user-name"  class="control-label">登录用户名：</label>
                        <input type="text" class="form-control" id="user-name">
                    </div>
                    <div class="form-group">
                        <label for="password"  class="control-label">密码：</label>
                        <input type="password" class="form-control" id="password">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {

        let app={

            modal:$('#modal-form'),
            userNameObj:$('#user-name'),
            aliasNameObj:$('#alias-name'),
            serverAddressObj:$('#server-address'),
            passwordObj:$('#password'),
            tableObj:$('#table'),
            init:function (){
                let self=this;
                self.initTable();
                self.event();
            },
            event:function (){

                let self=this;
                self.modal.on('show.bs.modal', function (event) {

                    let button = $(event.relatedTarget),
                        dType = button.data('type'),
                        id=button.data('id')
                    if(id){
                        self.modal.attr('data-id',id)
                        doGet("/admin/serverinfo/find?id="+id,function(data){

                            self.userNameObj.val(data.data.user_name)
                            self.aliasNameObj.val(data.data.alias_name)
                            self.serverAddressObj.val(data.data.server_address)
                            self.passwordObj.val(data.data.password)

                        },function(data){
                        });
                    }

                    switch (dType){
                        case 'info':
                            self.modal.find('.modal-title').text('查看');
                            //不可编辑
                            self.readOnlyForm();
                            return
                        case 'edit':
                            self.modal.find('.modal-title').text('编辑')
                            return
                    }
                }).on('hide.bs.modal',function(){
                    self.resetModal();
                });

            },
            readOnlyForm:function (){
                let self=this;
                self.userNameObj.attr("readonly",true)
                self.aliasNameObj.attr("readonly",true)
                self.serverAddressObj.attr("readonly",true)
                self.passwordObj.attr("readonly",true)
            },
            resetModal:function (){
                let self=this;
                self.userNameObj.attr('readonly',false).val('');
                self.aliasNameObj.attr('readonly',false).val('');
                self.serverAddressObj.attr('readonly',false).val('');
                self.passwordObj.attr('readonly',false).val('');
            },
            initTable:function(){
                let self=this;
                self.tableObj.destroyTable().initTable({
                    method: 'get',  //以post的方式发送请求
                    url: '/admin/serverinfo/page',    //url地址，可以是接口也可以是本地json文件
                    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                    showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    queryParamsType : "undefined",
                    pagination:true,
                    queryParams: function(params) { // 请求远程数据时，您可以通过修改queryParams来发送其他参数即server分页时，这里的queryParams参数就是提交到服务器端的参数了
                        return {
                            size:params.pageSize,
                            page:params.pageNumber,
                        };
                    },
                    //每一行的唯一标识，一般为主键列
                    responseHandler: function (res) {
                        //在ajax获取到数据，渲染表格之前，修改数据源
                        //该项返回的为数据源内的二级列表data
                        return {
                            rows:res.data.rows,
                            total:res.data.total,
                        };
                    },
                    columns: [
                        {
                            title: '服务器别名',
                            visible: true,
                            align: 'center',
                            field: 'alias_name',
                            valign: 'middle',
                            width:"15%"
                        },
                        {
                            title: '服务器地址',
                            field: 'server_address',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"20%"

                        },
                        {
                            title: '登录用户名',
                            field: 'user_name',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"20%"
                        },
                        {
                            title: '备注',
                            field: 'memo',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"20%"
                        },
                        {
                            title: '操作',
                            field: 'operator',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"25%",

                            formatter: function (value, row, index) {
                                let id=row["id"],btnArr=[];

                                btnArr.push("<a  data-type='info' class='btn btn-sm  btn-success ' data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id="+id+">查看</a>")
                                btnArr.push("<a data-type='link' class='btn btn-sm btn-cyan' href='/admin/serverinfo/term?id="+id+"&tag=${.tag}&ts=${.ts}' >连接</a>")
                                btnArr.push("<a  data-type='edit' class='btn btn-sm  btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id="+id+">编辑</a>")
                                btnArr.push("<a class='btn btn-sm  btn-danger'  data-type='del'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id="+id+">删除</a>");
                                return "<div class='btn-group operator-group' >"+btnArr.join('')+"</div>"
                            }
                        }
                    ]
                });
            }


        }
        app.init();

    });

</script>
